"use client"

import React, {useEffect, useRef, useState} from 'react'

// 引入幸运轮盘组件，此处忽略类型错误
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
import {LuckyWheel} from '@lucky-canvas/react'

// 引入查询奖品列表和随机抽奖的API函数
import {queryRaffleAwardList, randomRaffle} from '@/apis'

// 引入奖品信息的类型定义
import {RaffleAwardVO} from '@/app/types/RaffleAwardVO';

/**
 * 幸运轮盘页面组件
 * 该组件负责渲染幸运轮盘，包括奖品列表的获取和抽奖逻辑的处理
 */
export function LuckyWheelPage() {
    // 奖品状态管理
    const [prizes, setPrizes] = useState([{}])
    // 用于引用幸运轮盘实例的ref
    const myLucky = useRef()

    // 轮盘区块样式配置，包括背景色和图片等
    const [blocks] = useState([
        {padding: '10px', background: '#869cfa', imgs: [{src: "https://bugstack.cn/images/system/blog-03.png"}]}
    ])

    // 轮盘按钮样式配置，包括半径、背景色和指针等
    const [buttons] = useState([
        {radius: '40%', background: '#617df2'},
        {radius: '35%', background: '#afc8ff'},
        {
            radius: '30%', background: '#869cfa',
            pointer: true,
            fonts: [{text: '开始', top: '-10px'}]
        }
    ])

    /**
     * 查询奖品列表的处理函数
     * 从URL参数中获取策略ID，调用API获取奖品列表，并设置到组件状态中
     */
    const queryRaffleAwardListHandle = async () => {
        const queryParams = new URLSearchParams(window.location.search);
        const strategyId = Number(queryParams.get('strategyId'));
        const result = await queryRaffleAwardList(strategyId);
        const {code, info, data} = await result.json();
        if (code != "0000") {
            window.alert("获取抽奖奖品列表失败 code:" + code + " info:" + info)
            return;
        }

        // 创建一个新的奖品数组
        const prizes = data.map((award: RaffleAwardVO, index: number) => {
            const background = index % 2 === 0 ? '#e9e8fe' : '#b8c5f2';
            return {
                background: background,
                fonts: [{id: award.awardId, text: award.awardTitle, top: '15px'}]
            };
        });

        // 设置奖品数据
        setPrizes(prizes)
    }

    /**
     * 调用随机抽奖的处理函数
     * 从URL参数中获取策略ID，调用API进行随机抽奖，并返回中奖奖品的索引
     */
    const randomRaffleHandle = async () => {
        const queryParams = new URLSearchParams(window.location.search);
        const strategyId = Number(queryParams.get('strategyId'));
        const result = await randomRaffle(strategyId);
        const {code, info, data} = await result.json();
        if (code != "0000") {
            window.alert("随机抽奖失败 code:" + code + " info:" + info)
            return;
        }
        // 为了方便测试，mock 的接口直接返回 awardIndex 也就是奖品列表中第几个奖品。
        return data.awardIndex - 1;
    }

    // 组件挂载时查询奖品列表
    useEffect(() => {
        queryRaffleAwardListHandle().then(r => {
            // window.alert("奖品列表加载完成");
        });
    }, [])

    // 渲染幸运轮盘组件
    //flowchart TD
    //     A[开始] --> B[渲染 LuckyWheel 组件]
    //     B --> C[设置组件属性]
    //     C --> D[等待用户点击开始按钮]
    //     D --> E[调用 onStart 事件处理函数]
    //     E --> F[调用 myLucky.current.play() 开始转动轮盘]
    //     F --> G[延迟1秒]
    //     G --> H[调用 randomRaffleHandle() 获取中奖索引]
    //     H --> I[调用 myLucky.current.stop(prizeIndex) 停止轮盘]
    //     I --> J[调用 onEnd 事件处理函数]
    //     J --> K[显示中奖提示信息]
    //     K --> L[结束]
    return <div>
        <LuckyWheel
            ref={myLucky}
            width="300px"
            height="300px"
            // blocks={blocks}
            prizes={prizes}
            buttons={buttons}
            onStart={() => {
                // @ts-ignore
                myLucky.current.play()
                setTimeout(() => {
                    // 抽奖接口
                    randomRaffleHandle().then(prizeIndex => {
                            // @ts-ignore
                            myLucky.current.stop(prizeIndex);
                        }
                    );

                }, 1000)
            }}
            onEnd={
                // @ts-ignore
                prize => {
                    alert('恭喜你抽到【' + prize.fonts[0].text + '】奖品ID【' + prize.fonts[0].id + '】')
                }
            }
        />
    </div>
}
